<template>
  <div class="all">
    <div class="header">
      <span @click="back()" class="fanhui">
          <img src="../../assets/返回.png" alt="">
          <span class="sides">返回</span>
        </span>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
        left-icon=""
        show-action
      >
        <template #left-icon>
          <div @click="onSearch">
            <van-icon name="search" />
          </div>
        </template>
        <template #action>
          <div style="" @click="onSearch" class="sousuo">搜索</div>
        </template>
      </van-search>
      <span></span>
    </div>
    <div class="content">
      <ul class="ulList" v-if="isLoading == false">
        <li v-for="(item, index) in list" class="li" :key="index"
            @click="select(item.ITEM_ID, index, item.ITEM_NAME)">{{item.ITEM_NAME}}</li>
      </ul>
      <div class="loading" v-else>
        <van-loading  size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
      </div>
    </div>
    <div class="bottom">
      <button @click="queDing()">确定</button>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'SelectEntry',
  data () {
    return {
      searchValue: '',
      list: [],
      isLoading: true,
      index: 0,
      elseIndex: 0,
      itemName: '',
      itemId: ''
    }
  },
  mounted () {
    $('.content').css({'height': $(window).height() - $('.header').height() - $('.bottom').height() + 'px'})
    this.getEnterList()
  },
  methods: {
    // 点击确定
    queDing () {
      if (this.itemId.length > 0 && this.itemName.length > 0) {
        var itemId = JSON.stringify(this.itemId)
        window.sessionStorage['itemId'] = itemId
        var itemName = JSON.stringify(this.itemName)
        window.sessionStorage['itemName'] = itemName
      } else {
        window.sessionStorage['itemId'] = ''
        window.sessionStorage['itemName'] = ''
      }
      this.$router.go(-1)
    },
    // 点击选择项目名称
    select (id, index, name) {
      this.itemName = name
      this.itemId = id
      if ($('.li').eq(index).hasClass('cut')) {
        $('.li').eq(index).removeClass('cut')
      } else {
        $('.li').eq(index).addClass('cut').siblings().removeClass('cut')
      }
    },
    // 获取所有项目名称
    getEnterList () {
      this.$http.getItems({search: this.searchValue, type: 0, type_id: ''})
        .then(res => {
          console.log(res)
          this.list = res.data
          this.isLoading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击返回
    back () {
      this.$router.go(-1)
      window.sessionStorage['itemId'] = ''
      window.sessionStorage['itemName'] = ''
    },
    // 点击搜索
    onSearch () {
      this.getEnterList()
    }
  }
}
</script>

<style scoped>
  /**{*/
  /*  margin: 0;*/
  /*  padding: 0;*/
  /*}*/
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
  }
  .header{
    width: 100%;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background: #FFFFFF;
  }
  .fanhui{
    display: flex;
    align-items: center;
  }
  .sides, .sousuo{
    color: #1da4f2;
    font-size: 15px;
  }
  .fanhui img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  /deep/ .van-field__control{
    font-size: 15px;
  }
  /deep/ .van-search{
    width: 81%;
  }
  .bottom{
    width: 100%;
    height: 60px;
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
  }
  .bottom button{
    width: 92%;
    height: 44px;
    border: none;
    color: #FFFFFF;
    font-size: 17px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    border-radius: 22px;
  }
  .loading{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .content{
    overflow: auto;
  }
  .ulList{
    width: 92%;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
    /*background: #07c160;*/
  }
  .ulList li{
    width: 48%;
    box-sizing: border-box;
    height: 60px;
    font-size: 13px;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin: 5px 3px 0 3px;*/
    /*margin: 2.5%;*/
    margin-top: 10px;
    padding: 0 5px;
    text-align: center;
    font-family: "PingFang SC";
    color: #333333;
  }
  .cut{
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2) !important;
    color: #FFFFFF !important;
  }
</style>
